<template>
	<div class="category" >
		<!-- 切换的点击区域 -->
		<ul class="title-ul">
			<!-- 当点击事件的时候:标题默认效果切换,选项卡之间也需要切换 -->
			<li v-for="item in tabs" :key="item.id" :class="{ 'default' : iscur===item.id }" @click="iscur = item.id" >
				{{item.name}}
				<span class="default-span" ></span>
			</li>
		</ul>
		<CategoryTab1 v-if="iscur === 1" :tab1="list1" ></CategoryTab1>
		<CategoryTab2 v-if="iscur === 2" :propsCategoryTab2="list2"></CategoryTab2>
	</div>
</template>

<script>
	import {mapState} from 'vuex';
	import CategoryTab1 from './CategoryTab1.vue';
	import CategoryTab2 from './CategoryTab2.vue';
	export default{
		name : 'Category',
		props : ['category'],
		components : {
			CategoryTab1,
			CategoryTab2
		},
		watch:{
			category(){
				// console.log(this.category);
			}
		},
		data(){
			return{
				tabs : [
					{ id : 1 , name : '周边短途' },
					{ id : 2 , name : '当地玩乐' }
				],
				iscur : 1,	// 默认选中第一个标题以及第一个组价,
				list1: [],
				list2 : []
			}
		},
		created(){
			let that = this;
			this.axios.get( '/api/dataHome.json' ).then( (res)=>{
				// console.log(res.data.Homemsg[0]);
				let data = res.data.Homemsg[0];
				for( let index in res.data.Homemsg ){
					if( res.data.Homemsg[index].city == this.cityName ){
						data = res.data.Homemsg[index];
					}
				}
				// console.log(that.list2);
				that.list2 = data.CategoryList.tabList;
				that.list1 = data.CategoryList;
				// console.log(that.list1);
				// that.splikeList = data.SplikeVueList;
				// that.categoryVueList=data.CategoryList
				// console.log(that.categoryVueList);
				// console.log(that.categoryVueList);
				// console.log(this.splikeList.spike_List);
				
				
			} ).catch( (error)=>{
				console.log(error);
			} );
		},
		computed:{
			...mapState(['cityName']),
		}
	}
</script>

<style scoped >
	.category{
		width: 90%;
		margin: 0.5rem auto;
		/* border: 1px solid #D4D4D4; */
		border-radius: 0.35rem;
		/* background-color: pink; */
		height: 10.5rem;
		margin-top: 3.5rem;
	}
	.category .title-ul{
		height: 1.17rem;
		/* background-color: #eeeeee; */
		width: 100%;
		border-radius: 0.3rem;
		display: flex;
		align-items: center;
		overflow: hidden;
	}
	.category .title-ul li{
		width: 50%;
		text-align: center;
		line-height: 1.17rem;
		font-size: 0.35rem;
		font-weight: bold;
		border-radius: 0.3rem;
		background-color: #f3f3f3;
		position: relative;
	}
	.category .title-ul .default{
		background-color: white;
	}
	.category .title-ul .default .default-span{
		display: block;
		background-color: gold;
		height: 0.1rem;
		width: 1rem;
		position: absolute;
		left: 50%;
		bottom: 18%;
		margin-left: -0.5rem;
	}
</style>

